<template>
	<view class="home">
		<view class="home-topbg">
			<u-navbar class="nav-bar" leftIcon=" " title="爱云艺AI智能" :bgColor="bcg">
			</u-navbar>
			
			<!-- <view class="navbar-title">爱云艺AI智能</view> -->
			<swiper
				class="swiper home-bg"
				circular
				:indicator-dots="false"
				:autoplay="true"
		  >
				<swiper-item>
					<image style="width: 100%;height: 100%;" :src="localIconSrc('shouye.png')"></image>
				</swiper-item>
				<swiper-item>
					<image style="width: 100%; height: 100%;" :src="localIconSrc('qiehuan.png')"></image>
				</swiper-item>
			</swiper>
		<!-- <image class="home-bg" :src="localImgSrc('homehead.png')"></image> -->
		<view class="home-list">
			<view class="dubbing" @click="goDubbing">
				<view class="dubbing-text">
					<view class="main-text">AI配音</view>
					<view class="sub-text">行业配音助手</view>
				</view>
				<image class="image" :src="localImgSrc('microphone.png')"></image>
			</view>
			<view class="dubbing writing" @click="goWriting">
				<view class="dubbing-text">
					<view class="main-text">AI创作</view>
					<view class="sub-text">人工智能写作</view>
				</view>
				<image class="image" :src="localImgSrc('writing.png')"></image>
			</view>
		</view>
		<view class="home-list2">
			<view class="dubbing painting" @click="goPainting">
				<view class="dubbing-text">
					<view class="main-text">AI绘画</view>
					<view class="sub-text">一句话生图</view>
				</view>
				<image class="image" :src="localImgSrc('painting.png')"></image>
			</view>
			<view class="dubbing voice" @click="gotoVoice">
				<!-- <button :open-type="openType"></button> -->
				<!-- <view class="dubbing-text">
					<view class="main-text">声音定制</view>
					<view class="sub-text">定制您专属声音</view>
				</view>
				<image class="image" :src="localImgSrc('voice.png')"></image> -->
				<view class="dubbing-text">
					<view class="main-text">AI对话</view>
					<view class="sub-text">随问随答</view>
				</view>
				<image class="image" src="../../static/image/dialog.png"></image>
			</view>
		</view>
		</view>
		<view class="tool">
			<view class="tool-title" :class="active ? 'active-text' : ''">推荐工具</view>
			<view class="tool-list">
				<view class="tool-item" v-for="(item, index) in toolList" :key="index" @click="toolTag(item)">
					<image class="tool-img" :src="localImgSrc(item.imgUrl)"></image>
					<view class="tool-text">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="home-bottom">
			<view class="bottom-title">
				<view
				class="quenstion"
				:class="active1 ? 'unActive' : 'active-text'"
				@click="commonProblem">常见问题</view>
				<!-- <view class="use" :class="active1 ? 'active-text' : 'unActive'" @click="usageGuide">使用指南</view> -->
			</view>
			<view class="bottom-list">
				<view
					class="list-item"
					v-for="(item, index) in textList"
					:key="index"
					@click="handleArticle(item, index)"
				>
					<view class="item-text">{{ item.title }}</view>
					<u-icon name="arrow-right" color="#333" size="14"></u-icon>
					<!-- <image src="/static/image/right1.png" style="width: 20px; height: 20px;color: #333;"></image> -->
				</view>
			</view>
		</view>
  </view>
</template>

<script>
	import { getArticleList } from '@/api/order.js'
	export default {
		data() {
			return {
				// 原来的工具列表
				// toolList: [
				// 	// { name: 'recognition', imgUrl: 'recognition.png', text: '语音识别' },
				// 	// { name: 'noisereduction', imgUrl: 'noisereduction.png', text: '语音降噪' },
				// 	{ name: 'portrait', imgUrl: 'portrait.png', text: '人像风格' },
				// 	{ name: 'cutoutimage', imgUrl: 'cutoutimage.png', text: '智能抠图' },
				// 	{ name: 'photorestorate', imgUrl: 'photorestorate.png', text: '照片修复' },
				// 	// { name: 'copywriting', imgUrl: 'copywriting.png', text: '文案提取' },
				// 	// { name: 'watermark', imgUrl: 'watermark.png', text: '去除水印' },
				// 	// { name: 'rewrite', imgUrl: 'rewrite.png', text: '智能改写' },
				// 	// { name: 'abstract', imgUrl: 'abstract.png', text: '摘要提取' },
				// 	// { name: 'forbidden', imgUrl: 'forbidden.png', text: '禁词检测' }
				// ],
				
				toolList: [
					// { name: 'recognition', imgUrl: 'recognition.png', text: '语音识别' },
					// { name: 'noisereduction', imgUrl: 'noisereduction.png', text: '语音降噪' },
					{ name: 'portrait', imgUrl: 'portrait.png', text: '人像风格' },
					{ name: 'cutoutimage', imgUrl: 'cutoutimage.png', text: '人像抠图' },
					{ name: 'cutoutimage', imgUrl: 'abstract.png', text: '通用抠图' },
					{ name: 'photorestorate', imgUrl: 'photorestorate.png', text: '照片修复' },
					{ name: 'photorestorate', imgUrl: 'rewrite.png', text: '清晰度增强' },
				],
				textList: [],
				active: true,
				active1: false,
				bcg: 'transparent',
				openType: ''
			}
		},
		onShow() {
			if(uni.getStorageSync('apiticket')){
				this.openType = 'contact'
			} else {
				this.openType = ''
			}
			this.getArticles()
		},
		onPageScroll(e) {
			this.onScroll(e)
		},
		onShareTimeline() {
			return {
				title: '爱云艺AI智能',
			}
		},
		onShareAppMessage() {
			return {
				title: '爱云艺AI智能',
				path: '/pages/home/index'
			}
		},
		methods: {
			onScroll(e) {
				const scrollTop = e.scrollTop
				const threshold = 100
				const navBar = uni.createSelectorQuery().select('.nav-bar')
				if (scrollTop > threshold) {
					this.bcg = '#FCE6DE'
				} else {
					this.bcg = 'transparent'
				}
		  },
			// 配音
			goDubbing() {
				uni.navigateTo({
					url: `/pages/ai-dub/list/list`
				})
			},
			// 绘图
			goPainting() {
				uni.navigateTo({
					url: `/pages/ai-pat/index`
				})
			},
			// 写作
			goWriting() {
				uni.navigateTo({
					url: `/pages/ai-create/list/list`
				})
			},
			gotoVoice() {
				uni.navigateTo({
					url: `/pages/ai-create/ai-dialog/ai-dialog`
				})
				return
				if(uni.getStorageSync('apiticket')){
					this.openType = 'contact'
					
				} else {
					this.openType = ''
					uni.showModal({
						title: "提示",
						content: "请先登录",
						success(res) {
							if(res.confirm){
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/login/index",
									})
								}, 1000);
							}
						},
					});
				}
			},
			// 使用指南
			usageGuide() {
				this.active1 = true
			},
			// 常见问题
			commonProblem() {
				this.active1 = false
			},
			// 点击推荐工具的每一项
			toolTag(item) {
				console.log('点击了工具')
				// 音频：语音识别、语音降噪 
				if(item.name == 'recognition' || item.name == 'noisereduction') {
					uni.navigateTo({
						url: `/pages/recognite/index?title=${item.text}`
					})
					// 图像处理
				} else if(item.name == 'photorestorate' || item.name == 'portrait' || item.name == 'cutoutimage') {
					uni.navigateTo({
						url: `/pages/photo/index?title=${item.text}`
					})
				}
			},
			getArticles() {
				getArticleList().then(res => {
					console.log('res', res)
					// const { data } = res.data;
					this.textList = res.data.data;
				})
			},
			handleArticle(item, index) {
				// 传对象给下一页
				const param = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/articleDetail/index?data=${param}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400upx。
	.home {
		background: #fff;
		position: relative;
	}
	.home-topbg {
		position: relative;
		height: 100%;
		margin-bottom: 380rpx;
	}
	.home-bg {
		width: 100%;
		height: 440upx;
		margin: 0px;
	}
	.navbar-title {
		font-size: 32upx;
		text-align: center;
		position: fixed;
		top: 60px;
		left: 38%;
	}
	.home-list {
		position: absolute;
		top: 420upx;
	}
	.home-list2 {
		position: absolute;
		top: 612rpx;
	}
	.home-list, .home-list2 {
		display: flex;
		justify-content: space-between;
		margin: 0px 32rpx;
		.dubbing {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 320upx;
			height: 164upx;
			// border-radius: 16px;
			background-size: 320rpx 164rpx;
			background-image: $dubbing-bg;
			margin-right: 32rpx;
			.dubbing-text {
				height: 84upx;
				.main-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				.sub-text {
					font-size: 28rpx;
					color: #999;
					margin-top: 10rpx;
				}
			}
			.image {
				width: 64upx;
				height: 64upx;
			}
		}
		.writing {
			background-image: $writing-bg;
		}
		.painting {
			background-image: $painting-bg;
		}
		.voice {
			background-image: $voice-bg;
			position: relative;
			button {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}
	.tool {
		margin: 0rpx 36rpx 60rpx;
		.tool-title {
			font-size: 32upx;
			color: #333;
		}
		.tool-list {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			.tool-item {
				// width: 15%;
				height: 100upx;
				margin-top: 32upx;
				text-align: center;
				margin-right: 32upx;
			}
			// .tool-item:not(:first-child) {
			// 	margin-left: 16px;
			// }
			.tool-img {
				width: 60upx;
				height: 60upx;
			}
			.tool-text {
				font-size: 24upx;
				color: #333;
			}
		}
	}
	.home-bottom {
		margin: 0px 36upx;
		.bottom-title {
			margin-bottom: 32upx;
			display: flex;
			.use {
				margin-left: 32upx;
			}
		}
		.bottom-list {
			.list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #f5f5f5;
				padding: 30rpx 10rpx 30rpx 10rpx;
				color: #333;
				.item-text {
					font-size: 28upx;
					width: 600rpx;
				  white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.active-text {
		font-size: 32upx;
		color: #333;
		// background-repeat: repeat;
		background-image: linear-gradient(0deg, rgba(255, 96, 5, 0.6), #fff 40%, #fff);
		// filter: blur();
		height: 36upx;
		width: 130upx;
	}
	.unActive {
		color: #999;
		font-size: 32upx;
	}
</style>